<template>
  <div class="container">
    <ul class="btn_group">
      <li
        class="no_active"
        v-for="(m, index) of btnInfo"
        :class="{ checked: m.id == n }"
        @click="changeBtn(m.id)"
      >
        {{ m.name }}
      </li>
    </ul>
    <orderList :list="orderList"></orderList>
  </div>
</template>

<script>
import orderList from "./component/order-list.vue";
import { getRecordedList } from "@/api/vip";
import loadMore from "@/components/load-more";
export default {
  data() {
    return {
      btnInfo: [
        { name: "全部", id: "all" },
        { name: "已付款", id: 2 },
        { name: "待收货", id: 3 },
        { name: "已完成", id: 1 }
      ],
      n: 'all',
      page: 1,
      isAll: false,
      loading: false,
      orderList: []
    };
  },
  components: {
    orderList,
    loadMore
  },
  methods: {
    changeBtn(index) {
      this.n = index;
      this.page = 1;
      this.isAll = false;
      this.orderList = []
      this.getRecordedList(1, index);
    },
    getRecordedList(page, status) {
      getRecordedList({
        page,
        type: 3,
        status: status === "all" ? null : status
      }).then(res => {
        if (res.status === 200) {
          this.orderList.push(...res.data.data);
          if (res.data.data.length === 0) {
            this.isAll = true;
            this.$dialog.toast({
              mes: "没有更多了",
              timeout: 1000
            });
          }
        }
        this.loading = false;
      });
    },
    loadMore() {
      if (this.loading || this.isAll || this.orderList.length === 0) return;
      this.loading = true;
      this.getRecordedList(++this.page);
    }
  },
  created() {
    this.getRecordedList(1);
  }
};
</script>

<style lang="less" scoped>
.container {
  min-height: 100%;
  height: auto;
  .clear {
    clear: both;
  }

  .btn_group {
    background: #ffffff;
    padding: 0.48rem;

    li {
      display: inline-block;
      width: 3.4rem;
      height: 1.32rem;
      margin-right: 0.1rem;
      line-height: 1.32rem;
      text-align: center;
      font-size: 0.52rem;
      border: none;
    }

    .no_active {
      background: #f5f5f5;
      color: #666666;
      border-radius: 0.1rem;
    }

    li.checked {
      background: #0078ff;
      color: #ffffff;
    }
  }
}
</style>
